<template>
    <div>
<!--        <el-button type="success" @click="batch">批量出库</el-button>-->

<!--        <el-dialog-->
<!--                title="提示"-->
<!--                :visible.sync="add"-->
<!--                width="30%"-->
<!--                style="padding: 10px 5px"-->
<!--        >-->
<!--            <van-picker show-toolbar title="标题" :columns="columns" />-->

<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="add = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="addBranch">确 定</el-button>-->
<!--            </span>-->
<!--        </el-dialog>-->

        <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="联系人" prop="shopname">
                <el-input v-model="ruleForm.shopname" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="shoptel">
                <el-input v-model="ruleForm.shoptel" placeholder="请输入正确的手机号，方便我们后期通知您"></el-input>
            </el-form-item>
            <el-form-item label="门店名" prop="branchname">
                <el-input v-model="ruleForm.branchname"></el-input>
            </el-form-item>
            <el-form-item label="门店描述" prop="branchdescrible">
                <el-input v-model="ruleForm.branchdescrible"></el-input>
            </el-form-item>
            <el-form-item label="经营品类" prop="shoptype">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-cascader
                            v-model="ruleForm.shoptype"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            :show-all-levels="false"></el-cascader>
                </div>
            </el-form-item>
            <el-form-item label="门店类型" prop="branchtype">
                <el-radio-group v-model="ruleForm.branchtype">
                    <el-radio label="美食/餐厅线上活动"></el-radio>
                    <el-radio label="地推活动"></el-radio>
                    <el-radio label="线下主题活动"></el-radio>
                    <el-radio label="单纯品牌曝光"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>

            <el-form-item label="门店图" prop="shopurl" >
                    <el-upload
                            class="avatar-uploader"
                            action="http://192.168.1.18:81/settled/settledlibrary/upload03"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:200px;
                        height:200px">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
            </el-form-item>
            <el-form-item label="法人身份证" prop="personcardurl">
                <el-upload
                        class="avatar-uploader"
                        action="http://192.168.1.18:81/settled/settledlibrary/upload03"
                        :show-file-list="false"
                        :on-success="handleAvatarSucces"
                        :before-upload="beforeAvatarUploa">
                    <img v-if="imageUrl2" :src="imageUrl2" class="avatar" style="width:200px;
                        height:200px">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="营业执照" prop="businessurl">
                <el-upload
                        class="avatar-uploader"
                        action="http://192.168.1.18:81/settled/settledlibrary/upload03"
                        :show-file-list="false"
                        :on-success="handleAvatarSucce"
                        :before-upload="beforeAvatarUploa">
                    <img v-if="imageUrl3" :src="imageUrl3" class="avatar" style="width:200px;
                        height:200px">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="经营许可证" prop="coaurl">
                <el-upload
                        class="avatar-uploader"
                        action="http://192.168.1.18:81/settled/settledlibrary/upload03"
                        :show-file-list="false"
                        :on-success="handleAvatarSucc"
                        :before-upload="beforeAvatarUploa">
                    <img v-if="imageUrl4" :src="imageUrl4" class="avatar" style="width:200px;
                        height:200px">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">立即创建</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "ShopSettled",
        data() {
            return {
                active: 0,
                add:false,
                imageUrl: '',
                imageUrl2: '',
                imageUrl3: '',
                imageUrl4: '',


                ruleForm: {

                },

                value: [],
                options: [],
                props:{
                    value:'btid',
                    label:'btname',
                    children:'children',

                    multiple:false
                },
                rules: {
                    shopname: [
                        { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                    ],
                    shoptel: [
                        { required: true, message: '请输入正确的手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '手机号长度不正确', trigger: 'blur' }
                    ],
                    branchname: [
                        { required: true, message: '请输入店铺名', trigger: 'blur' }
                    ],
                    branchdescrible: [
                        { required: true, message: '请输入店铺描述', trigger: 'blur' },
                    ],
                    shoptype: [
                        { type: 'array', required: true, message: '请选择店铺品类', trigger: 'change' }
                    ],
                    branchtype: [
                        { required: true, message: '请选择门店类型', trigger: 'change' }
                    ],
                    address: [
                        { required: true, message: '请输入门店地址', trigger: 'blur' }
                    ],
                }
            };


        },
        created() {
            this.initFindAllBranchType();
        },
        methods: {
            initFindAllBranchType(){
                this.$http.post("/branch/businessType/findAllbusinesstype").then(result => {
                    console.log(result)

                    this.options = result.data.data
                    this.getTreeData(this.options)
                })
            },
            //设置递归方法
            getTreeData(options){
                options.forEach(v => {
                        if (v.children.length<1){
                            v.children=undefined
                        }else {
                            this.getTreeData(v.children)
                        }
                })

            },
            submitForm() {


                this.$refs['ruleForm'].validate((valid)=>{
                    if (valid){
                        let l = this.ruleForm.shoptype.length-1
                        this.ruleForm.shoptype = this.ruleForm.shoptype[l];
                        this.ruleForm.shopurl = this.imageUrl;
                        this.ruleForm.personcardurl = this.imageUrl2;
                        this.ruleForm.businesslicenseurl = this.imageUrl3;
                        this.ruleForm.coaurl = this.imageUrl4;
                        console.log(this.ruleForm)

                        this.$http.post("/settled/settledlibrary/insertSettledFindAll",this.ruleForm).then(result => {
                            console.log(result);
                            if (result.data.code===2000){
                                this.$message.success("提交成功,3秒后将跳转到主页面");
                                setTimeout(() => {
                                    this.$router.push("/index");
                                },3000)

                            }else {
                                this.$message.error("提交失败")
                            }
                        });
                    }
                })

            },
            resetForm() {
                this.ruleForm = {}
                this.imageUrl = ""
                this.imageUrl2 = ""
                this.imageUrl3 = ""
                this.imageUrl4 = ""
                this.$nextTick(() =>{
                    this.$refs['ruleForm'].clearValidate()
                })
            },
            batch(){
                this.add =true
            },
            handleChange(value) {
                console.log(value);
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                //this.userForm.imagesUrl = this.imageUrl;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleAvatarSucces(res, file) {
                this.imageUrl2 = res.data;
                //this.userForm.imagesUrl = this.imageUrl;
            },
            handleAvatarSucce(res, file) {
                this.imageUrl3 = res.data;
                //this.userForm.imagesUrl = this.imageUrl;
            },
            handleAvatarSucc(res, file) {
                this.imageUrl4 = res.data;
                //this.userForm.imagesUrl = this.imageUrl;
            },
            beforeAvatarUploa(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

        }
    }
</script>

<style scoped>
    .el-input{
        width: 90%;
    }
</style>